import React, { useMemo } from 'react';

import useScreenSize from '@/hooks/useScreenSize';

import HdpiHeader from './components/HdpiHeader';
import LdpiHeader from './components/LdpiHeader';
import styles from './index.module.scss';

const GlobalHeader: React.FC = () => {
  const { width } = useScreenSize();

  // 防止小屏初渲染时出现闪烁大屏视图，反之亦然
  const screenWidth = useMemo(() => {
    if (!width) {
      return document.body.clientWidth;
    }
    return width;
  }, [width]);

  return (
    <header className={styles.globalHeader}>
      {screenWidth && screenWidth < 640 ? <LdpiHeader /> : <HdpiHeader />}
    </header>
  );
};

export default GlobalHeader;
